<template>
  <el-row class="card">
    <div class="order-detail">
      <el-image
        :src="url"
        class="pic"
        @click="this.$router.push({ path: '/commodity/', query: {id: commodityId}})"
      >
        <template #placeholder>
          <div class="image-slot">Loading<span class="dot">...</span></div>
        </template>
      </el-image>

      <div class="content">
        <span>
          {{ name }}
        </span>
        <span>
          <span>
            {{ content }}
          </span>
          <br />
          <span>{{ expressInfo }} <el-divider direction="vertical" />{{ time }}</span>
        </span>
      </div>
    </div>

    <div style="width: 150px; text-align: right">
      <el-text
        class="text"
        @click="this.$router.push({path: '/orderDetail', query: {id: orderDetailId}})"
      >查看详情</el-text>
      <span v-show="isComplete">
        <el-divider direction="vertical" />
        <el-text>查看发票</el-text>
      </span>
    </div>
    <el-divider></el-divider>
  </el-row>
</template>
  
  <script>
export default {
  props: {
    url: String,
    content: String,
    expressInfo: String,
    time: String,
    isComplete: Boolean,
    orderDetailId: Number,
    commodityId: Number,
    name: String,
  },
};
</script>
  
  <style scoped>
.card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
}
.order-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content {
  width: 500px;
  height: 75px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  color: #79797a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.pic {
  width: 75px;
  height: 75px;
  margin-right: 20px;
  cursor: pointer;
}
.text:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>